<template>
  <div class="app-container">
    <div class="sumList">
      <div class="item">
        <div class="num">{{ totalObject.yesReportAmount || 0 }}</div>
        <div class="desc">已生成报告总金额</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject.yesReport || 0 }}</div>
        <div class="desc">已生成报告数量</div>
      </div>
      <div class="item">
        <div class="num">{{ totalObject.noReport || 0 }}</div>
        <div class="desc">查无报告数量</div>
      </div>
    </div>
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID</label>
        <el-input
          v-model="searchForm.userId"
          class="search-item"
          placeholder="请输入用户ID"
          onkeyup="value=value.replace(/[^\d|^.]/g, '')"
        />
      </div>
      <div class="searchItem">
        <label for="">创建时间</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="创建时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
          @click="fnTime"
        />
      </div>
      <div class="searchItem">
        <label for="">VIN</label>
        <el-input
          v-model="searchForm.vin"
          class="search-item"
          placeholder="请输入VIN"
        />
      </div>
      <div class="searchItem">
        <label for="">订单编号</label>
        <el-input
          v-model="searchForm.orderNo"
          class="search-item"
          placeholder="请输入订单编号"
        />
      </div>
      <div class="searchItem">
        <label for="">状态 :</label>
        <el-select v-model="searchForm.status" placeholder="全部" filterable>
          <el-option label="查询中" value="1" />
          <el-option label="已生成报告" value="2" />
          <el-option label="查无报告" value="0" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">平台名称:</label>
        <el-select v-model="searchForm.application" placeholder="全部" @change="fnChange">
          <el-option label="全部" value="" />
          <el-option label="ebroker" value="00" />
          <el-option label="车E家" value="01" />
          <!-- <el-option label="车E家小程序" value="2" /> -->
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-hasPermission="['valuation:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">诊断记录列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="50px"
      />
      <el-table-column
        label="订单编号"
        prop="orderNo"
        :show-overflow-tooltip="true"
        align="center"
        width="200px"
      />
      <el-table-column
        label="创建时间"
        :show-overflow-tooltip="true"
        align="center"
        width="180px"
        prop="createTime"
      />
      <el-table-column
        label="用户ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="userId"
        min-width="80px"
      />
      <el-table-column
        label="VIN"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.vin }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="消费金额(元)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="报告生成时间"
        :show-overflow-tooltip="true"
        align="center"
        width="180px"
        prop="createTime"
      />
      <el-table-column
        label="平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.application">{{ scope.row.application == '00' ? "ebroker" : "车E家" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{
            ["查无报告", "查询中", "已生成报告"][scope.row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <Dialog :id="lookId" :visible="dialogVisible" @fnClose="myclose" />
    <el-dialog title="" :visible.sync="viewDialogVisible" width="30%">
      <img :src="previewUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Dialog from './dialog.vue'
export default {
  components: {
    Pagination,
    Dialog
  },
  data() {
    return {
      submitFormEdit: true,
      viewDialogVisible: false,
      previewUrl: '',
      editForm: {
        price: ''
      },
      totalObject: {},
      searchForm: {
        vin: '',
        startTime: '',
        endTime: '',
        orderNo: '',
        userId: '',
        status: '',
        application: ''
        // packageType: ''
      },
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      loading: false,
      tableKey: 0,
      dateTime: '',
      list: [],
      lookId: 0,
      dialogVisible: false,
      editdialogVisible: false,
      paginations: {
        pageSize: 5,
        pageNum: 1
      },
      total2: 0,
      list1: []
    }
  },
  created() {
    this.getCarVinReportCount()
    this.search()
  },
  methods: {
    getCarVinReportCount() {
      this.$get(`/web/carVinReport/getCarVinReportCount?type=5&application=${this.searchForm.application}`).then((res) => {
        if (res.data.code === '0') {
          this.totalObject = res.data.data
        }
      })
    },
    fnTime(e) {
      this.getCarVinReportCount()
    },
    fnChange(e) {
      this.getCarVinReportCount()
    },
    view(row) {
      console.log(row)
      this.$router.push({
        name: 'diagnosticDetail',
        query: {
          id: row.id
        }
      })
    },
    openView(url) {
      this.viewDialogVisible = true
      this.previewUrl = url
    },
    async search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.startTime = `${this.dateTime[0]}`
        this.searchForm.endTime = `${this.dateTime[1]}`
      }
      this.loading = true
      try {
        // /webzlh/reportBase/list/report?userNameOrMobile=13008800250&pageNum=1&pageSize=20
        const result = await this.$get('/web/carVinReport/getList', {
          ...this.pagination,
          ...this.searchForm,
          type: 5
        })
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.rows
          this.total = result.data.data.total
        } else {
          this.loading = false
          this.$message.error(result.data.message)
        }
      } catch (error) {
        this.loading = false
      }
    },
    isAssetTypeAnImage(ext) {
      var index = ext.lastIndexOf('.')
      ext = ext.substr(index + 1)
      return (
        [
          'png',
          'jpg',
          'jpeg',
          'bmp',
          'gif',
          'webp',
          'psd',
          'svg',
          'tiff'
        ].indexOf(ext.toLowerCase()) !== -1
      )
    },
    reset() {
      const list = Object.keys(this.searchForm)
      list.forEach(element => {
        this.searchForm[element] = ''
      })
      this.dateTime = ''
      this.search()
      // this.brand()
    },
    look(row) {
      this.lookId = row.id
      this.dialogVisible = true
      // this.$get('web/carVinReport/getDetail?id=2').then(res => {
      //   console.log(res)
      // })
    },
    myclose() {
      this.dialogVisible = false
    },
    setPrice() {
      this.editdialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.sumList {
  margin: 20px 10px;
  display: flex;
  justify-content: space-evenly;
  .item {
    width: 160px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
  }
}
</style>
